<template>
  <div class="lang-select">
    <LanguageSelect title="语言"></LanguageSelect>
  </div>
  <div class="update">
    <el-form
      ref="updateRef"
      :model="updateForm"
      :rules="updateRules"
      class="update-form"
    >
      <h3 class="title">{{ t('user.editPwd') }}</h3>
      <el-form-item prop="loginAccount">
        <el-input
          v-model="updateForm.loginAccount"
          type="text"
          size="large"
          auto-complete="off"
          :placeholder="t('user.loginAccountPlaceholder')"
        >
          <template #prefix
            ><svg-icon icon-class="user" class="el-input__icon input-icon"
          /></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="oldPwd">
        <el-input
          v-model="updateForm.oldPwd"
          type="password"
          size="large"
          auto-complete="off"
          :placeholder="t('user.oldPasswordPlaceholder')"
          @keyup.enter="handleUpdatePwd"
        >
          <template #prefix
            ><svg-icon icon-class="password" class="el-input__icon input-icon"
          /></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="newPwd">
        <el-input
          v-model="updateForm.newPwd"
          type="password"
          size="large"
          auto-complete="off"
          :placeholder="t('user.newPasswordPlaceholder')"
          @keyup.enter="handleUpdatePwd"
        >
          <template #prefix
            ><svg-icon icon-class="password" class="el-input__icon input-icon"
          /></template>
        </el-input>
      </el-form-item>

      <el-form-item style="width: 100%">
        <el-button
          :loading="loading"
          size="large"
          type="primary"
          style="width: 100%"
          @click.prevent="handleUpdatePwd"
        >
          <span v-if="!loading">{{ t('user.editPwd') }}</span>
          <span v-else>{{ t('user.updating') }}</span>
        </el-button>
        <div style="float: right">
          <router-link class="link-type" :to="'/login'">{{
            t('user.useExistingAccount')
          }}</router-link>
        </div>
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <div class="el-update-footer">
      <span>{{ t('common.title') }}</span>
    </div>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import LanguageSelect from '@/components/AshCommon/LanguageSelect.vue'
import { ElMessageBox } from 'element-plus'
import { UpdateUserPwd } from '@/api/login'
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt'
const router = useRouter()
const { proxy } = getCurrentInstance()

const updateForm = ref({
  oldPwd: '',
  newPwd: '',
  loginAccount: '',
})

const equalToPassword = (rule, value, cb) => {
  if (value == '') {
    cb(new Error(t('user.newPasswordRuleErrorTip')))
  } else if (value == updateForm.oldPwd) {
    cb(new Error(t('user.newPasswordSameAsOldTip')))
  } else {
    cb()
  }
}

const updateRules = {
  loginAccount: [
    {
      required: true,
      trigger: 'blur',
      message: t('user.loginAccountPlaceholder'),
    },
  ],
  oldPwd: [
    {
      required: true,
      trigger: 'blur',
      message: t('user.oldPasswordRuleErrorTip'),
    },
  ],
  newPwd: [
    {
      required: true,
      trigger: 'blur',
      message: t('user.newPasswordRuleErrorTip'),
    },
    { required: true, validator: equalToPassword, trigger: 'blur' },
  ],
}

const loading = ref(false)

function handleUpdatePwd() {
  proxy.$refs.updateRef.validate((valid) => {
    if (valid) {
      loading.value = true
      UpdateUserPwd(updateForm.value)
        .then((res) => {
          const loginAccount = updateForm.value.loginAccount
          Cookies.set('username', loginAccount, { expires: 30 })
          Cookies.set('password', encrypt(updateForm.value.newPwd), {
            expires: 30,
          })
          Cookies.set('rememberMe', true, {
            expires: 30,
          })
          ElMessageBox.alert(
            t('user.passwordUpdateSuccess'),
            t('message.tip'),
            {
              dangerouslyUseHTMLString: true,
              type: 'success',
            }
          )
            .then(() => {
              router.push('/login')
            })
            .catch(() => {})
        })
        .catch(() => {
          loading.value = false
        })
    }
  })
}
</script>

<style lang="scss" scoped>
.update {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url('../assets/images/login-background.jpg');
  background-size: cover;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.update-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 40px;
    input {
      height: 40px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}
.update-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.el-update-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
</style>
